<template>
    <div class="step">
        <div 
            :class="{
                line: !item.title, 
                'step-item': item.title, 
                active: item.step <= current, 
                current: item.step == current
            }" 
            v-for="(item, index) in step" 
            :key="index"
        >
            {{item.title}}
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            list: {
                type: Array,
                default: []
            },
            current: {
                type: Number | String,
                default: 1
            }
        },
        computed: {
            // 主要处理给步骤间加横线
            step(){
                const list = [{title: '', step: 2}, {title: '', step: 3}]
                let index = 1
                list.forEach(item => {
                    this.list.splice(index, 0, item)
                    index+=2
                })
                return this.list
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .step{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: toRem(60) 0 toRem(40) 0;
        .step-item{
            background-color: #F6F8FC;
            border-radius: toRem(10);
            color: #333;
            font-size: toRem(28);
            padding: toRem(15) toRem(33);
            box-sizing: border-box;
        }
        .line{
            width: toRem(50);
            height: toRem(4);
            background-color: #ECECEC;
            border-radius: toRem(2);

        }
        .active.step-item{
            background-color: #FFF0F0;
            color: #FD453D;
        }
        .active.line{
            background-color: #FD453D;
        }
        .current:not(.line){
            border: toRem(2) solid #FD453D;
        }
    }
 
</style>
